<template>
    <div class="index-lists">
        <el-card class="!border-none" shadow="never">
            <el-form ref="formRef" class="mb-[-16px]" :model="queryParams" :inline="true">
                <el-form-item label="投放账号" prop="account_id">
                    <el-input class="w-[280px]" clearable v-model="queryParams.account_id" />
                </el-form-item>
                <el-form-item label="日期" prop="start_time">
                    <daterange-picker
                        v-model:startTime="queryParams.date_start_time"
                        v-model:endTime="queryParams.date_end_time"
                    />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleSearch">查询</el-button>
                    <el-button @click="handleReset">重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>

        <el-card class="!border-none mt-4" shadow="never">
            <el-row :gutter="16">
                <el-col :xs="24" :sm="12" :md="5" class="text-center mb-4">
                    <el-statistic value-style="color:#F56C6C;font-size:16px" title="ROI" :value="divideAndFormat(statisticData.recharge, statisticData.cost)" />
                </el-col>
                <el-col :xs="24" :sm="12" :md="5" class="text-center mb-4">
                    <el-statistic value-style="color:#409EFF;font-size:16px" title="成本" :value="statisticData.cost || 0" />
                </el-col>
                <el-col :xs="24" :sm="12" :md="5" class="text-center mb-4">
                    <el-statistic value-style="color:#67C23A;font-size:16px" title="充值" :value="statisticData.recharge || 0"/>
                </el-col>
                <el-col :xs="24" :sm="12" :md="5" class="text-center mb-4">
                    <el-statistic value-style="color:#606266;font-size:16px" title="粉丝数" :value="statisticData.users || 0"/>
                </el-col>
                <el-col :xs="24" :sm="12" :md="4" class="text-center mb-4">
                    <el-statistic value-style="color:#E6A23C;font-size:16px" title="粉价" :value="divideAndFormat(statisticData.cost, statisticData.users)"/>
                </el-col>
            </el-row>
        </el-card>

        <el-card class="!border-none mt-4" shadow="never">
            <el-table
                class="mt-4"
                size="large"
                v-loading="pager.loading"
                :data="pager.lists"
            >
                <el-table-column label="日期"  prop="date" min-width="100" />
                <el-table-column label="投放账号" show-overflow-tooltip prop="account_id" min-width="110" />
                <el-table-column label="账号名称" show-overflow-tooltip prop="account_title" min-width="110" />
                <el-table-column label="ROI" min-width="100">
                    <template #default="{ row }">
                        <el-statistic value-style="color:#F56C6C;font-size:16px" :value="divideAndFormat(row.recharge ,row.cost)"/>
                    </template>
                </el-table-column>
                <el-table-column label="成本"  prop="cost" min-width="100">
                    <template #default="{ row }">
                        <el-statistic value-style="color:#409EFF;font-size:16px" :value="row.cost" />
                    </template>
                </el-table-column>
                <el-table-column label="充值"  prop="recharge" min-width="100">
                    <template #default="{ row }">
                        <el-statistic value-style="color:#67C23A;font-size:16px" :value="row.recharge" />
                    </template>
                </el-table-column>
                <el-table-column label="粉丝数"  prop="recharge" min-width="100">
                    <template #default="{ row }">
                        <el-statistic value-style="color:#606266;font-size:16px"  :value="row.users" />
                    </template>
                </el-table-column>
                <el-table-column label="粉价"  prop="recharge" min-width="100">
                    <template #default="{ row }">
                        <el-statistic value-style="color:#E6A23C;font-size:16px"  :value="divideAndFormat(row.cost ,row.users)" />
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="160" fixed="right">
                    <template #default="{ row }">
                        <el-row :gutter="24">
                            <el-col :span="11">
                                <el-button v-perms="['client:orders:list']" type="success" link>
                                    <router-link :to="{
                                        path: getRoutePath('client:orders:list'),
                                        query: {
                                              account_id: row.account_id,
                                        }
                                    }">
                                        订单管理
                                    </router-link>
                                </el-button>
                            </el-col>
                            <el-col :span="11">
                                <el-button v-perms="['client:client_user:list']" type="danger" link>
                                    <router-link :to="{
                                        path: getRoutePath('client:client_user:list'),
                                        query: {
                                            account_id: row.account_id,
                                        }
                                    }">
                                        用户管理
                                    </router-link>
                                </el-button>
                            </el-col>
                        </el-row>
                    </template>
                </el-table-column>
            </el-table>
            <div class="flex justify-end mt-4">
                <pagination v-model="pager" @change="getLists" />
            </div>
        </el-card>
    </div>
</template>

<script lang="ts" setup name="records">
import { rechargeReportLists, rechargeReportStatistic } from '@/api/client/recharge_report'
import { usePaging } from '@/hooks/usePaging'
import { format } from 'date-fns'
import { getRoutePath } from '@/router'
import { ref } from 'vue'

const { query } = useRoute()
const today = format(new Date(), 'yyyy-MM-dd')
const queryParams = reactive({
    account_id: String(query?.account_id || ""),
    month: '', //
    date_start_time: today,
    date_end_time: today,
})

const { pager, getLists, resetPage, resetParams } = usePaging({
    fetchFun: rechargeReportLists,
    params: queryParams
})

// 手动管理统计数据
const statisticData = ref({
    cost: 0,
    recharge: 0,
    users: 0
})

// 获取统计数据
const fetchStatistic = async () => {
    try {
        const response = await rechargeReportStatistic(queryParams)
        statisticData.value = response || { cost: 0, recharge: 0, users: 0 }
    } catch (error) {
        console.error('获取统计数据失败:', error)
        statisticData.value = { cost: 0, recharge: 0, users: 0 }
    }
}

// 统一的查询函数
const handleQuery = async () => {
    await Promise.all([
        getLists(),
        fetchStatistic()
    ])
}

// 重置函数
const handleReset = () => {
    resetParams()
    handleQuery()
}

// 更新模板中的按钮事件
const handleSearch = () => {
    resetPage()
    handleQuery()
}

function divideAndFormat(dividend: any, divisor: any): string {
    const numDividend = Number(dividend);
    const numDivisor = Number(divisor);

    if (!numDivisor || isNaN(numDivisor) || numDivisor === 0) {
        return '0.00';
    }

    if (isNaN(numDividend)) {
        return '0.00';
    }

    const result = numDividend / numDivisor;
    return result.toFixed(2);
}


// 初始化
onMounted(() => {
    handleQuery()
})
</script>